<script setup>
import { ref } from 'vue';

const text = ref(``)//获取到上面文本内输入的信息
const result = ref(`校园内花美景美，人更美`)//获取到的翻译结果

// //对文件进行限制
// const beforeAvatarUpload = (rawFile) => {
//     if (rawFile.type !== 'mp3/wav/pcm/aac/speex/lyb/ac3/aac/ape/m4r/mp4/acc/wma') {
//         ElMessage.error('Avatar picture must be JPG format!')
//         return false
//     } else if (rawFile.size > 5) {
//         ElMessage.error('Avatar picture size can not exceed 5MB!')
//         return false
//     }
//     return true
// }
</script>

<template>
    <el-row>
        <el-col :span="24">
            <el-card style="margin: 15px;height: 85vh;">
                <el-row>
                    <el-col :span="24">
                        <div class="ai-module-demo-container" style="margin-top: 35px;">
                            <div class="tech-recognition" images="" videos="">
                                <div class="ai-container">
                                    <div class="corrector">
                                        <div class="mid-down-title">
                                            <span class="down-title-des">请上传想转述的音频文件：</span>
                                        </div>
                                        <div class="mid-input">
                                            <div class="glass-model">
                                                <el-upload class="upload-demo" drag action="#" multiple
                                                    :auto-upload="false" :limit="1" :before-upload="beforeAvatarUpload">
                                                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                                    <div class="el-upload__text">
                                                        拖拽文件到此处&nbsp;&nbsp; 或者 <em>点击进行上传</em>
                                                    </div>
                                                    <template #tip>
                                                        <div class="el-upload__tip">
                                                            mp3/wav 音频文件 并且文件大小需小于 5MB
                                                        </div>
                                                    </template>
                                                </el-upload>
                                            </div>
                                            <div class="msg-tip" style="display: none;">文本解析中...</div>
                                            <div class="msg-tip" style="display: none;">
                                                很抱歉，文本中可能存在敏感内容,请<span class="retry">重新输入</span>。
                                            </div>
                                        </div>
                                        <div class="mid-btn">
                                            <el-button class="mid-btn-span">
                                                开始转述
                                            </el-button>
                                        </div>
                                        <div class="demo-result">
                                            <div class="demo-result-title">转述结果</div>
                                            <div class="demo-result-body">
                                                {{ result }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>



<style scoped>
.ai-module-demo-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* margin-top: 40px; */
}

.tech-recognition {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ai-container {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.corrector {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    width: 1180px;
    margin: 0 auto;
    font-family: Microsoft YaHei;
}

.mid-down-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin-bottom: 20px;
}

.down-title-des {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 18px;
    color: #000;
}

.com-click {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 2px;
    color: #3d9cff;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #3d9cff;
}

.mid-input {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
}

.glass-model {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    height: 100%;
}

.mid-form-cover {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    background-color: #fff;
}

.com-txt {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    z-index: 2;
    display: block;
    width: 1180px;
    height: 200px;
    padding: 30px 0 64px 30px;
    background-color: transparent;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.com-txt-area {
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 24px;
    width: 1128px;
    height: 100%;
    color: #666;
    border: none;
    outline: 0;
    resize: none;
    padding: 0 20px 0 0;
}

.ed-form-down {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    height: 24px;
}

.ed-down-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    font-size: 14px;
    margin: 0 2px;
    color: #ff851a;
}

.msg-tip {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 32px;
    width: fit-content;
    height: 36px;
    line-height: 36px;
    color: #666;
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15);
    border-radius: 4px;
    display: none;
}

.retry {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 36px;
    color: #1a73e8;
    cursor: pointer;
}

.mid-btn {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    padding: 30px 0;
    text-align: center;
}

.mid-btn-span {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    text-align: center;
    color: #036de2;
    border: 1px solid #036fe2;
    cursor: pointer;
    display: inline-block;
    margin: 0 auto;
    box-sizing: border-box;
    width: 180px;
    height: 54px;
    /* line-height: 54px; */
    font-size: 18px;
}

.demo-result {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: relative;
    height: 200px;
    box-sizing: border-box;
    border: 1px solid #eee;
    padding: 56px 26px 42px 30px;
}

.demo-result-title {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    top: 20px;
    color: #000;
    font-weight: 700;
}

.demo-result-body {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    color: #666;
    line-height: 24px;
}


.el-tooltip demo-result-highlight {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    line-height: 24px;
    background: #036fe2;
    color: #fff;
}

.demo-result-tips {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    position: absolute;
    left: 30px;
    bottom: 20px;
    color: #999;
}

.ed-tips-in {
    font: 14px BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, PingFangSC-Regular, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-family: Microsoft YaHei;
    margin: 0 2px;
    color: #ff851a;
}
</style>
